<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 面包屑 -->
        <div slot="header" v-if="$route.query.id">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 头部 表单 -->
        <el-row type="flex">
          <!-- 左边表单列 -->
          <el-col :span="18">
            <el-form
              label-width="80px"
              class="formsty"
              :model="detail"
              ref="detail"
            >
              <el-form-item label="目录名称">
                <el-input
                  style="width: 200px"
                  v-model="detail.directoryName"
                ></el-input>
              </el-form-item>

              <el-form-item label="状态">
                <el-select placeholder="请选择" v-model="detail.state">
                  <el-option
                    v-for="item in status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-button @click="resetFrom">清除</el-button>
              <el-button type="primary" @click="inquire">搜索</el-button>
            </el-form>
          </el-col>

          <!-- 右边新增 -->
          <el-col :span="6">
            <div class="right">
              <div class="rightChildren">
                <el-page-header
                  title="返回学科"
                  style="color: #66b1ff"
                  v-if="$route.query.id"
                  @click="$router.back()"
                >
                </el-page-header>
              </div>

              <div>
                <el-button
                  type="success"
                  size="small"
                  icon="el-icon-edit"
                  @click="addDirectorys"
                  >新增目录</el-button
                >
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 条数 -->
        <el-alert :title="sum" type="info" :closable="false" show-icon>
        </el-alert>

        <!-- 主体表格 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="180">
          </el-table-column>

          <el-table-column label="所属学科" prop="subjectName" width="180">
          </el-table-column>

          <el-table-column prop="directoryName" label="目录名称">
          </el-table-column>

          <el-table-column prop="username" label="创建者"> </el-table-column>

          <el-table-column  label="创建日期">
            <template slot-scope="scope">
                {{ scope.row.addDate |newTime}}
            </template>

             </el-table-column>

          <el-table-column prop="totals" label="面试题数量"> </el-table-column>

          <el-table-column label="状态">
            <template slot-scope="scope">
              {{ scope.row.state === 1 ? "禁用" : "启用" }}
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                class="spansty"
                @click="stateChange(scope.row.id, scope.row.state)"
                >{{ scope.row.state === 1 ? "启用" : "禁用" }}</el-button
              >
              <el-button
                class="spansty"
                :style="scope.row.state === 0 ? 'color:#c0c4d5' : ''"
                :disabled="scope.row.state === 0"
                @click="EditDir(scope.row)"
                >修改</el-button
              >
              <el-button
                class="spansty"
                :style="scope.row.state === 0 ? 'color:#c0c4d5' : ''"
                :disabled="scope.row.state === 0"
                @click="delDirectory(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="pagequery.pagesize"
          :current-page="pagequery.page"
          background
          layout="prev, pager, next,sizes ,jumper"
          :page-sizes="[5, 10, 15, 20]"
          :total="total"
        >
        </el-pagination>

        <!-- 弹出层 -->
        <el-dialog
          :title="isEdit ? '修改目录' : '新增目录'"
          :visible.sync="dialogVisible"
          width="20%"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          @close="closeEvent"
        >
          <!-- 表单 -->
          <el-form ref="form" :model="form" label-width="80px" :rules="rules" class="formSty">
            <el-form-item label="所属学科" prop="subjectID">
              <el-select
                v-model="form.subjectID"
                placeholder="请选择"
                class="selectinp"
              >
                <el-option
                  v-for="item in subjects"
                  :key="item.id"
                  :label="item.subjectName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="目录名称" prop="directoryName">
              <el-input v-model="form.directoryName"></el-input>
            </el-form-item>
            <el-form-item class="submitList">
              <el-button class="delSty" @click="cancel">取消</el-button>
              <el-button type="primary" @click="addOrEditDirectorys"
                >确认</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  list as catalogList,
  changeState,
  add as addDirectorys,
  detail as detailDirectory,
  update as updateDirectory,
  remove as removeDir
} from '@/api/hmmm/directorys'
import { list as getSubjects } from '@/api/hmmm/subjects'
import { status } from '@/api/hmmm/constants'
import { parseTime } from '@/utils/index'
export default {
  name: 'Directorys',
  // 初始化
  created () {
    this.catalogList()
  },
  // 监听地址栏的变化
  watch: {
    '$route.query.id': {
      immediate: true,
      handler (value) {
        if (!value) {
          this.catalogList()
        }
      }
    }
  },
  // 过滤器
  filters: {
    newTime (value) {
      return parseTime(value)
    },
    selectOption (value) {
      if (value === '') {
        return '请选择'
      }
    }
  },
  data () {
    return {
      status,
      // 校验规则
      rules: {
        directoryName: [
          { required: true, message: '请输入所属学科', trigger: 'blur' }
        ],
        subjectID: [
          { required: true, message: '请输入所属学科', trigger: 'blur' }
        ]
      },
      // 添加所需要数据
      form: {
        directoryName: '',
        subjectID: ''
      },

      dialogVisible: false, // 弹出层的显示

      sum: '', // 头部条数

      total: 1, // 数据总量

      // 头部搜索关联数据
      detail: {
        directoryName: '',
        state: ''
      }, //

      tableData: [], // 列表数据

      subjects: [], // 学科列表

      pagequery: {
        page: 1, // 当前页数
        pagesize: 10 // 当前显示数量
      },
      isEdit: false // 是否是编辑页面
    }
  },

  methods: {
    // 删除
    async delDirectory (id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该目录, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmRes === 'cancel') return
      await removeDir({ id })
      if (this.tableData.length === 1) {
        this.pagequery.page--
        if (this.pagequery.page < 1) {
          this.pagequery.page = 1
        }
      }
      this.$message.success('删除成功')
      this.catalogList()
    },

    // 提交事件
    addOrEditDirectorys () {
      // 兜底验证
      this.$refs.form.validate(async valid => {
        if (!valid) return
        if (!this.isEdit) {
        // 新增
          await addDirectorys(this.form)
          this.$message.success('添加成功')
          this.dialogVisible = false
          this.catalogList()
        } else {
        // 修改
          await updateDirectory(this.form)
          this.dialogVisible = false
          this.catalogList()
        }
      })
    },

    // 新增
    addDirectorys () {
      this.isEdit = false
      this.dialogVisible = true
      this.getSubjects()
    },

    // 修改/数据的回显
    async EditDir (row) {
      this.isEdit = true
      this.dialogVisible = true
      const res = await detailDirectory({ id: row.id })
      this.form = res.data

      // 判断这行有没有subjectName
      if (row.subjectName) {
        this.getSubjects()
      } else {
        this.form.subjectID = ''
        this.getSubjects()
      }
    },

    // 关闭弹框时重置数据
    closeEvent () {
      this.$refs.form.resetFields()
      this.form = {}
    },

    // 取消时间
    cancel () {
      this.dialogVisible = false
    },

    // 头部数据的查询
    async inquire () {
      const res = await catalogList(this.detail)
      this.tableData = res.data.items
    },

    // 头部清除数据按钮
    resetFrom () {
      this.detail = {}
      this.catalogList()
    },

    // 获取列表数据
    async catalogList () {
      // 判断地址栏有无数据
      if (this.$route.query) {
        const res = await catalogList({ subjectID: this.$route.query.id, ...this.pagequery })
        this.sum = '数据一共 ' + res.data.counts + '条'
        this.total = res.data.counts
        this.tableData = res.data.items
      } else {
        const res = await catalogList(this.pagequery)
        this.sum = '数据一共 ' + res.data.counts + '条'
        this.total = res.data.counts
        this.tableData = res.data.items
      }
    },

    // 获取学科列表
    async getSubjects () {
      const SubRes = await getSubjects()
      this.subjects = SubRes.data.items
    },

    // 每页条数变化
    handleSizeChange (val) {
      this.pagequery.pagesize = val
      this.catalogList()
    },

    // 当前页变化
    handleCurrentChange (val) {
      this.pagequery.page = val
      this.catalogList()
    },

    // 状态改变
    async stateChange (id, state) {
      await changeState({ id, state: state === 1 ? 0 : 1 })
      this.$message.success('操作成功')
      this.catalogList()
    }
  }
}
</script>

<style scoped>
.formsty {
  display: flex;
}
::v-deep .el-button--medium {
  height: 36px;
  margin-left: 10px;
}
::v-deep .el-page-header__left::after {
  display: none;
}
.right {
  float: right;
  display: flex;
}
::v-deep .el-page-header {
  line-height: 36px;
}
.el-pagination {
  margin-top: 30px;
  float: right;
}
.spansty {
  margin-left: -20px;
  margin-right: 5px;
  color: #409eff;
  cursor: pointer;
  border: none;
  background: none;
  cursor: pointer;
}
.spansty:hover {
  background: none;
}
::v-deep .selectinp {
  width: 100%;
}
.delSty {
  margin-left: 100px;
}
</style>
